<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    #Mytable{
        width: 1000px;
        height: 500px;
        margin: 0px auto;
    }
    #Mytable td {
            border: solid 1px rgb(0, 153, 255);
            text-align: center;
            font-weight: bolder;
            width: 30px;
        }
    #Mytable tr{
        width: 30px;
    }
</style>

<script type="text/javascript">
        var end;
        var count = 0;
        function start(){
            count = 1;
            document.getElementById('spanInfo').innerHTML='幸运儿...'
            end = setInterval('getResult()', 100)
        }
        function getResult() {
            for(let i = 1;i <= 45; i++){
                document.getElementById('t'+ i).style.background='white';
            }
            count++;
            var num = Math.ceil(Math.random()*45);
            var obj = document.getElementById('t'+ num);
            obj.style.background = 'pink';

            if (count >= 30) {
                document.getElementById('spanInfo').innerHTML = obj.innerHTML;
                clearInterval(end);
            }
        }
</script>


<body>
    <div style="text-align: center; margin: 50px;">
            <input type="button" value="点击抽奖" onclick="start()" >
            <br>
            <br>
            <span style="text-align: center; " id="spanInfo" ></span>
    </div>

    <table id="Mytable">
        <tr>
            <td id="t1">翁章斌</td>
            <td id="t2">谢琰辰</td>
            <td id="t3">陈枫</td>
            <td id="t4">卢佳凯</td>
            <td id="t5">黄伟杰</td>
            <td id="t6">何睿</td>
            <td id="t7">吴守康</td>
            <td id="t8">黄楷钊</td>
            <td id="t9">陈锋杰</td>
        </tr>
        <tr>
            <td id="t10">余金星</td>
            <td id="t11">刘嘉远</td>
            <td id="t12">周泽强</td>
            <td id="t13">洪灿芳</td>
            <td id="t14">薛晖</td>
            <td id="t15">吴明杰</td>
            <td id="t16">胡志文</td>
            <td id="t17">候锟铖</td>
            <td id="t18">杨晨哲</td>
        </tr>
        <tr>
            <td id="t19">陈志梁</td>
            <td id="t20">吴泳泰</td>
            <td id="t21">李雅芸</td>
            <td id="t22">詹源铠</td>
            <td id="t23">陈钰锋</td>
            <td id="t24">杨丰华</td>
            <td id="t25">曾鹏</td>
            <td id="t26">吴昊绩</td>
            <td id="t27">吴超</td>
        </tr>
        <tr>

            <td id="t28">胡江雄</td>
            <td id="t29">谷兆明</td>
            <td id="t30">陈洋</td>
            <td id="t31">张平</td>
            <td id="t32">危振山</td>
            <td id="t33">达兴建</td>
            <td id="t34">张静</td>
            <td id="t35">叶小杰</td>
            <td id="t36">周飘</td>

        </tr>
        <tr>
            <td id="t37">陈振国</td>
            <td id="t38">贺晋卓</td>
            <td id="t39">李涛</td>
            <td id="t40">赖杰林</td>
            <td id="t41">刘旭涛</td>
            <td id="t42">江嘉兴</td>
            <td id="t43">田鑫强</td>
            <td id="t44">范雅欢</td>
            <td id="t45">巫晨羿</td>
        </tr>
       

    </table>
</body>
</html>